<template>
  <div class="host-order">
    <h3 class="title">主持人订单中心</h3>
    <el-form :inline="true" :model="hostOrderForm" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="hostOrderForm.ordername"
          placeholder="下单人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="hostOrderForm.ordercompany"
          placeholder="下单公司"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="hostOrderForm.hostname"
          placeholder="主持人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="hostOrderForm.ordername"
          placeholder="下单人时间"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="hostOrderForm.status" placeholder="全部状态">
          <el-option label="代主持" value="daizhuchi"></el-option>
          <el-option label="已主持" value="yizhuchi"></el-option>
          <el-option label="已删除" value="yishanchu"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="hostOrderForm.role" placeholder="全部角色">
          <el-option label="婚庆公司" value="company"></el-option>
          <el-option label="策划师" value="planner"></el-option>
          <el-option label="新人" value="newperson"></el-option>
        </el-select>
        典礼时间：<el-date-picker
          v-model="value"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <p style="margin-bottom: 20px">
      共检索到<span>{{ num }}</span
      >条记录，总额度<span>{{ totalPrice }}</span
      >元
    </p>
    <el-table :data="hostOrderData" border style="width: 100%">
      <el-table-column prop="oid" label="编号" width="50"> </el-table-column>
      <el-table-column prop="pphone" label="下单人手机号"> </el-table-column>
      <el-table-column prop="cname" label="下单公司"> </el-table-column>
      <el-table-column prop="hname" label="主持人"> </el-table-column>
      <el-table-column
        prop="hoteladdress"
        label="酒店名称地址"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="wedding_time"
        label="典礼日期时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="money" label="金额"> </el-table-column>
      <el-table-column prop="status" label="订单状态"> </el-table-column>
      <el-table-column label="操作">
        <el-button>查看评价</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "HostOrder",
  data() {
    return {
      hostOrderForm: {},
      value: "",
      hostOrderData: [],
      num: 0,
      totalPrice: 0,
    };
  },
  methods: {
    onSubmit() {},
  },
  mounted() {
    api.hostOrder().then((res) => {
      this.hostOrderData = res.data;
      this.num = res.data.length;
      var total = 0;
      for (let i = 0; i < res.data.length; i++) {
        total += res.data[i].money;
      }
      this.totalPrice = total;
    });
  },
};
</script>

<style lang="less" scoped>
.host-order {
  margin-left: 20px;
  .title {
    text-align: center;
    padding: 20px;
    background-color: #c4b4a9;
    margin-bottom: 10px;
  }
}
</style>